<template>
	<w-container class="vintage_shop">
		<w-navbar id='my-nav' placeholder title="" leftIcon="back-btn-white">
			<template #left>
				<view @click="backPage">
					<w-image src="/static/bg/vintage_back.png" width="33" height="15.5"></w-image>
				</view>
			</template>
			<template #right>
				<view @click="toSearch" class="search">
					<w-image src="/static/bg/vintage_search.png" width="48" height="32"></w-image>
				</view>
			</template>
		</w-navbar>
		<VintageTab :list="list" :value='form.series_id' @change="changeSeries"></VintageTab>
		<view class="pa-16">
			<view class="flex sort flex-js-sb">
				<view class="font-size-14 br-8  flex flex-ai-center sort-item" :class='{active:item.key==sort}'
					v-for='(item,index) in sortMap' @click='changeSort(item,index)'>
					<text>{{item.title}}</text>
					<w-icon class='ml-8' size="14" style="width: 14rpx;height: 24rpx;" :class="{asc:item.order=='asc'}"
						:name="item.key==sort? 'vshop_sort-active':'vshop_sort-disable'"></w-icon>
				</view>
			</view>
			<view class="list flex flex-w flex-js-sb">
				<view class="item" v-for="item in goodsList" :key="item.id" @click="goBegList(item.id)">
					<w-image :src="$ossUrl + item.listimg" width="108" height="108" class="list_img"
						mode="aspectFill"></w-image>
					<view class="goods_info pa-8 flex flex-dir-col  flex-js-center">
						<view class="goods_name font-size-13 font-w-500 text-overflow">{{item.name}}</view>
						<view class="goods_price font-size-16 font-w-bold mt-8">¥{{item.min_price}}</view>
					</view>
				</view>
			</view>
			<w-loading fontColor="font-color-back" v-if="!goodsList.length" emptyType="search" emptyTop="100"
				:type="loading"></w-loading>
		</view>
	</w-container>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import VintageTab from './components/VintageTab'

	import {
		getVintageShopMarketList
	} from '@/api/market/index.js'

	export default {
		data() {
			return {
				baseList: [],
				form: {
					series_id: -3,
					page: 1,
					list_rows: 10,
				},
				sortMap: [{
						title: "交易量",
						key: 'flux',
						order: 'desc'
					},
					{
						title: "求购价",
						key: 'min_price',
						order: 'asc'
					},
					{
						title: "涨幅",
						key: 'increase_price',
						order: 'asc'
					}
				],
				sort: 'flux',
				goodsList: [],
				loading: 'none'
			}
		},
		components: {
			VintageTab
		},
		computed: {
			...mapState('goods', ['vintageSeries']),
			list() {
				return this.baseList.concat(this.vintageSeries)
			},
		},
		onPullDownRefresh() {
			this.goodsList = []
			this.loading = 'none'
			this.getList(this.form)
		},
		methods: {
			...mapActions('goods', ['getSeries']),
			changeSeries(v) {
				this.form.series_id = v;
				this.getList(this.form)
			},
			changeSort({
				key,
				order
			}, index) {
				this.sort = key;
				let newOrder = this.sortMap[index].order == 'asc' ? 'desc' : 'asc'
				this.$set(this.sortMap[index], 'order', newOrder);
				if (order == 'asc') {
					this.goodsList.sort((a, b) => {
						return b[key] - a[key]
					})

				} else {

					this.goodsList.sort((a, b) => {
						return a[key] - b[key]
					})
				}

			},
			async getList(search) {
				this.loading = 'loading'
				const res = await getVintageShopMarketList(search)
				uni.stopPullDownRefresh()
				this.goodsList = res.data
				if (this.goodsList.length) {
					this.loading = 'nomore'
				} else {
					this.loading = 'empty'
				}
			},
			// loadMoreBox() {
			// 	let search = this.$tools.copyObj(this.form)
			// 	search.page++
			// 	this.getBoxList(search);
			// },
			goBegList(id) {
				uni.navigateTo({
					url: `/pages/vintageShop/vshopBegbuy?id=${id}`
				})
			},
			toSearch() {
				uni.navigateTo({
					url: `/pages/market/search?isVshop=${1}`
				})
			}
		},
		onLoad() {
			this.getSeries().then(() => {
				this.getList(this.form)
			})
		},
	}
</script>

<style lang="scss" scoped>
	.vintage_shop {
		background: url($IMG_URL + '/static/bg/vintageBg.png');
		background-repeat: no-repeat;
		background-size: 750rpx;
		/* #ifdef H5 */
				padding-top: 292rpx;
		/* #endif */
		
		/* #ifdef APP */
				padding-top: calc( 292rpx - var(--status-bar-height));
		/* #endif */

		background-color: #F6F6F6;
	}

	.search {
		position: fixed;
		right: 0;
		top: 24rpx;
	}

	.sort {
		.sort-item {
			color: #666666;
		}

		.sort-item.active {
			color: #0081FF;
		}

		.asc {
			transform: rotate(180deg);
		}
	}

	.list {
		margin-top: 104rpx;

		.item {
			margin-bottom: 32rpx;
			position: relative;
			width: 216rpx;
			height: 344rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			overflow: hidden;

			.goods_info {
				// width: 206rpx;
				// height: 94rpx;
				// background: url($IMG_URL + '/static/bg/vshop_goods_bg.png');


				.goods_name {
					color: #222;
				}

				.goods_price {
					color: #222;
				}
			}

			.list_img {
				// position: absolute;
				// left: 50%;
				// transform: translateX(-50%);
				// top: -44rpx;
			}
		}
	}
</style>